import React from "react"
import { UserOutlined } from "@ant-design/icons"
import { Avatar, Space } from "antd"
import styles from "./Logo.module.scss"
import favicon from "public/favicon.png"
import { useNavigate } from "react-router-dom"

// interface Logotype {
//   text: string
// }
const Logo: React.FC = () => {
  const nav = useNavigate()
  const handleNav = () => {
    nav("/")
  }

  return (
    <>
      <div className={styles.logo} onClick={handleNav}>
        <h3 className={styles["header-title"]}>
          <span className={styles.reactLink}>React</span>Sphere
        </h3>
        <Avatar shape="square" size={60} src="/favicon.png" />
      </div>
    </>
  )
}

export default Logo
